<template>
  <div class="bottom-area">
    <div class="groups">
      <div class="item" v-for="(tool, index) in bottomTools" :key="index">
        <router-link :to="tool.path">
          <div class="icon">
            <i :class="['iconfont', tool.icon]"></i>
          </div>
          <div class="text">{{ tool.text }}</div>
        </router-link>
      </div>
      <div class="item">
        <el-popover placement="top" trigger="hover" popper-style="background-color:transparent;color:#fff;">
          <template #reference>
            <div class="icon">
              <i class="iconfont icon-chizi"></i>
            </div>
          </template>
          <div class="measureIcons">
            <div class="measureIcon" v-for="(icon, index) in measureIcons" :key="index">
              <router-link :to="`/measure/${icon.path}`">
                <i :class="['iconfont', icon.icon]"></i>
              </router-link>
            </div>
          </div>
        </el-popover>
        <div class="uniqueText">测量距离</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
// const router = useRouter();

// function handleClick(path) {
//   router.push({
//     name: 'measure',
//     params: {
//       type: path,
//     },
//   });
// }

const bottomTools = [
  {
    icon: 'icon-earth',
    text: '自转',
    path: '/rotate',
  },
  {
    icon: 'icon-kongzhitai',
    text: '控制台',
    path: '/plot',
  },
  {
    icon: 'icon-feiji',
    text: '城市视图',
    path: '/city',
  },
  {
    icon: 'icon-Magnifier',
    text: '搜索',
    path: '/search',
  },
  {
    icon: 'icon-qiaoliang',
    text: '桥梁',
    path: '/bridge',
  },
];

const measureIcons = [
  {
    icon: 'icon--_zhexian',
    text: '折线',
    path: 'line',
  },
  {
    icon: 'icon-xingzhuang-juxing',
    text: '矩形',
    path: 'rectangle',
  },
  {
    icon: 'icon-duobianxing',
    text: '多边形',
    path: 'polygon',
  },
  {
    icon: 'icon-yuan',
    text: '圆',
    path: 'circle',
  },
];
</script>

<style scoped>
.bottom-area {
  position: fixed;
  bottom: 0;
  left: 0;
  color: #fff;
  width: 100vw;
  height: 70px;
  background-image: url('@/assets/images/xzd-header.png');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: rotateZ(180deg);
  .groups {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      margin-left: 5px;
      cursor: pointer;
      .icon {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background-color: rgb(0, 0, 147, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 5px;
      }
      a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 50px;
        font-size: 12px;
      }

      .uniqueText {
        font-size: 12px;
      }
    }
    transform: rotateZ(180deg);
  }
}
</style>
